<link rel="stylesheet" href="/vendor/jQuery-File-Upload-9.11.2/css/jquery.fileupload.css">
<link rel="stylesheet" href="/vendor/jQuery-File-Upload-9.11.2/css/jquery.fileupload-ui.css">
<link rel="stylesheet" href="/vendor/buttons.css">

<div id="legend" class="">
    <legend class="">添加图册</legend>
</div>

<form id="fileupload" class="form-horizontal" method="post" enctype="multipart/form-data" data-file-upload="options" data-ng-class="{'fileupload-processing': processing() || loadingFiles}">
    <div class="form-group">
        <label for="inputName" class="col-sm-1 control-label">图册名称</label>
        <div class="col-sm-10">
            <input type="text" ng-model="atlas.name" class="form-control" id="inputName" placeholder="名称" required>
        </div>
    </div>
    <div class="form-group">
        <label for="inputType" class="col-sm-1 control-label">所属分类</label>
        <div class="col-sm-10">
            <select class="form-control" id="inputType" ng-model="atlas.pictype" ng-change="getPictypeTag(atlas.pictype)"
                    required>
                <option ng-repeat="item in picTypeList" value={{item.id}}>{{item.pictype}}</option>
            </select>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-1 control-label">标签</label>
        <div class="col-sm-10">
            <div class="" data-toggle="buttons">
                <label class="btn btn-primary button-3d button-pill" ng-click="checkTag(item.id)" ng-repeat="item in tagList">
                    <input type="checkbox" autocomplete="off"> {{item.tag}}
                </label>
            </div>
        </div>
    </div>

    <div class="form-group">
        <label for="inputType" class="col-sm-1 control-label">图片</label>
        <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
        <div class="row fileupload-buttonbar">
            <div class="col-sm-10">
                <!-- The fileinput-button span is used to style the file input field as button -->
                <span class="btn btn-success fileinput-button" ng-class="{disabled: disabled}">
                    <i class="glyphicon glyphicon-plus"></i>
                    <span>添加文件...</span>
                    <input type="file" name="files[]" multiple ng-disabled="disabled">
                </span>
                <button type="button" class="btn btn-primary start" data-ng-click="submit()">
                    <i class="glyphicon glyphicon-upload"></i>
                    <span>Start upload</span>
                </button>
                <button type="button" class="btn btn-warning cancel" data-ng-click="cancel()">
                    <i class="glyphicon glyphicon-ban-circle"></i>
                    <span>Cancel upload</span>
                </button>
                <!-- The global file processing state -->
                <span class="fileupload-process"></span>
            </div>
            <!-- The global progress state -->
            <div class="col-lg-5 fade" data-ng-class="{in: active()}">
                <!-- The global progress bar -->
                <div class="progress progress-striped active" data-file-upload-progress="progress()"><div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div></div>
                <!-- The extended global progress state -->
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <!-- The table listing the files available for upload/download -->
        <table class="table table-striped files ng-cloak">
            <tr data-ng-repeat="file in queue" data-ng-class="{'processing': file.$processing()}">
                <td data-ng-switch data-on="!!file.thumbnailUrl">
                    <div class="preview" data-ng-switch-when="true">
                        <a data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery><img data-ng-src="{{file.thumbnailUrl}}" alt=""></a>
                    </div>
                    <div class="preview" data-ng-switch-default data-file-upload-preview="file"></div>
                </td>
                <td>
                    <p class="name" data-ng-switch data-on="!!file.url">
                        <span data-ng-switch-when="true" data-ng-switch data-on="!!file.thumbnailUrl">
                            <a data-ng-switch-when="true" data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}" data-gallery>{{file.name}}</a>
                            <a data-ng-switch-default data-ng-href="{{file.url}}" title="{{file.name}}" download="{{file.name}}">{{file.name}}</a>
                        </span>
                        <span data-ng-switch-default>{{file.name}}</span>
                    </p>
                    <strong data-ng-show="file.error" class="error text-danger">{{file.error}}</strong>
                </td>
                <td>
                    <p class="size">{{file.size | formatFileSize}}</p>
                    <div class="progress progress-striped active fade" data-ng-class="{pending: 'in'}[file.$state()]" data-file-upload-progress="file.$progress()">
                        <div class="progress-bar progress-bar-success" data-ng-style="{width: num + '%'}"></div>
                    </div>
                </td>
                <td>
                    <button type="button" class="btn btn-primary start" data-ng-click="file.$submit()" data-ng-hide="!file.$submit || options.autoUpload" data-ng-disabled="file.$state() == 'pending' || file.$state() == 'rejected'">
                        <i class="glyphicon glyphicon-upload"></i>
                        <span>Start</span>
                    </button>
                    <button type="button" class="btn btn-warning cancel" data-ng-click="file.$cancel()" data-ng-hide="!file.$cancel">
                        <i class="glyphicon glyphicon-ban-circle"></i>
                        <span>Cancel</span>
                    </button>
                    <button data-ng-controller="FileDestroyController" type="button" class="btn btn-danger destroy" data-ng-click="file.$destroy()" data-ng-hide="!file.$destroy">
                        <i class="glyphicon glyphicon-trash"></i>
                        <span>Delete</span>
                    </button>
                </td>
            </tr>
        </table>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-1 col-sm-10">
            <button class="btn btn-primary" data-ng-click="save(queue)">提交</button>
        </div>
    </div>
</form>